<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElTable } from 'element-plus'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
const input = ref('')
const value = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
//订单状态下拉
const options = [
  {
    value: '待确认',
    label: '待确',
  },
  {
    value: '已确认',
    label: '已确认',
  },
  {
    value: '已取消',
    label: '已取消',
  },
]
//付款状态下拉
const options2 = [
  {
    value: '待付款',
    label: '待付款',
  },
  {
    value: '已付款',
    label: '已付款',
  },
  {
    value: '已退款',
    label: '已退款',
  },
]
//订单类型
const options3 = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '虚拟订单',
    label: '虚拟订单',
  },
  {
    value: '实物订单',
    label: '实物订单',
  },
  {
    value: '积分订单',
    label: '积分订单',
  },
]
//数据
interface shop {
  orderNo: string
  orderVip: string
  orderedOnline: number
  orderBulk:number
  orderTotal:string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<shop[]>([])
const handleSelectionChange = (val: shop[]) => {
  multipleSelection.value = val
}
const options4=[
    {value:'批量设置已发货',label:'批量设置已发货',},
    {value:'删除',label:'删除',},
]
const tableData: shop[] = [
  {
    orderNo: '1411241412',
    orderVip: '小王',
    orderedOnline:0,
    orderBulk:1,
    orderTotal:'10,000.00'
    
  },
  {
    orderNo: '1411241412',
    orderVip: '小弟',
    orderedOnline:1,
    orderBulk:2,
    orderTotal:'10,000.00'
    
  },
 {
    orderNo: '1411241412',
    orderVip: '小李',
    orderedOnline:2,
    orderBulk:0,
    orderTotal:'10,000.00'
    
  },
 {
    orderNo: '1411241412',
    orderVip: '小张',
    orderedOnline:1,
    orderBulk:2,
    orderTotal:'10,000.00'
    
  },
]
//添加

</script>

<template>
<div>
  <el-row>
    <el-col :span="24">
        <div class="orderTitle">
          <el-input v-model="input" placeholder="搜索关键词" class="searchKeyword"/>
          <el-select v-model="value" class="orderOnline" clearable placeholder="订单状态">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
          <el-select v-model="value2" class="orderOnline" clearable placeholder="付款状态">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
          <el-select v-model="value3" class="orderOnline" clearable placeholder="订单类型">
            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
          <el-button type="primary" class="search">查 询</el-button>
        </div>
    </el-col>
  </el-row>
     <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" table-layout="fixed" class="tableList">
     <el-table-column type="selection" width="55" align="center"/>
     <el-table-column prop="orderNo" label="订单编号" align="center"/>
     <el-table-column prop="orderVip" label="会员" align="center"/>
     <el-table-column prop="orderedOnline" label="订单状态" align="center"/>
     <el-table-column prop="orderBulk" label="订单类型" align="center"/>
     <el-table-column prop="orderTotal" label="订单总金额" align="center"/>
     <el-table-column  label="操作" align="center">
        <el-button type="primary" text tag="a" href="http://localhost:5173/#/shopDetail" class="add">处理订单</el-button>
        <el-button type="danger" text>删 除</el-button>
     </el-table-column>
  </el-table>
  <el-row>
    <el-col :span="24">
        <div class="footer">
         <el-select v-model="value4" class="bulk" clearable placeholder="批量操作" >
             <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>      
              <el-button type="primary" class="searchBtn">确 定</el-button>
              <el-pagination background layout="prev, pager, next" :total="1000" class="fen"></el-pagination>
        </div>
    </el-col>
  </el-row>
</div>
</template>


<style scoped>
.searchKeyword{
    width: 200px;
}
.orderOnline{
    width: 200px;
    margin-left: 10px;
}
.search{
  margin-left: 10px;
}
.searchBtn{
    margin-left: 10px;
}
.bulk{
    width: 150px;
}
.footer{
    overflow: hidden;
    margin-top: 20px;
}
.fen{
    float: right;
}
.tableList{
    margin-top: 20px;
}
.add{
    text-decoration: none;
}
</style>